<template>
  <div class="home">
    <HomeData :sources="homeDatas"></HomeData>
    <HomeImg></HomeImg>
    <HomeSwiper></HomeSwiper>
    <HomeText></HomeText>
    <HomeShop :sources="homeShops"></HomeShop>
  </div>
</template>
<script>
import HomeData from "@/components/HomeData.vue";
import HomeImg from "@/components/HomeImg.vue";
import HomeSwiper from "@/components/HomeSwiper.vue";
import HomeText from "@/components/HomeText.vue";
import HomeShop from "@/components/HomeShop.vue";

// import Swiper from "@/components/Swiper.vue"
// import axios from "axios";
export default {
  name: "Home",
  data: function() {
    return {
      homeDatas: [],
      homeShops: []
    };
  },
  created() {
    // axios进行网络请求时返回的数据是一个Promise对象
    // axios可以实现多个网络请求同时发送，并且通过spread将返回结果按照请求的发送顺序依次返回
    this.$axios.all([this.getHomeData(), this.getRestaurants()]).then(
      this.$axios.spread((datas1, datas2) => {
        for (let index in datas1.data.data) {
          this.homeDatas.push(datas1.data.data[index]);
        }
        for (let index in datas2.data.data) {
          this.homeShops.push(datas2.data.data[index]);
        }

        console.log(datas1);
        console.log(datas2);
      })
    );
  },
  methods: {
    getHomeData() {
      return this.$axios.get("/api/common/getHomeData");
    },
    getRestaurants() {
      return this.$axios.get("/api/shopping/restaurants");
    }
  },
  components: {
    HomeData,
    HomeImg,
    HomeSwiper,
    HomeText,
    HomeShop
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  color: white;
}
</style>
